<template>
<!-- （提现记录） -->
<div class="w750" :class="[Nomsg?'white-bg':'' , themes.theme]">
	<!-- 提现记录 -->
	<div class="account-det" :class="themes.theme">
		<div class="m-tabs">
			<div :class="index==action?'item line-on':'item'" v-for="(item,index) in tabTitle" :key="index" @click="tab(index)">
				<span class="txt">{{item}}</span>
			</div>
		</div>
		<template v-if="!Nomsg">
			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
				<div class="account-det-list" style="margin-top: 44px;">
					<div class="item" v-for="(item,index) in withdrawalsListData.resultList" :key="index" @click="transferId(index)">
						<div class="item-left">
							<p class="txt">{{item.bankName}}</p>
							<span class="time">{{item.addTime | dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
						</div>
						<div class="item-right">
							<span class="price"><em class="now">{{Money(item.amount)[0]}}</em>.{{Money(item.amount)[1]}}</span>
							<span class="status" v-if="item.paymentState==0">待审核</span>
							<span class="status" v-if="item.paymentState==1">已完成</span>
						</div>
					</div>
				</div>
			</van-list>
		</template>
        <div class="Noempty" v-if="Nomsg"><Noempty :pic="require('../../assets/images/record-empty.png')" :title="'您没有相关记录'"/></div>
	</div>
	<!-- /提现记录 -->
</div>
</template>

<script>
import Noempty from 'components/Noempty/Noempty';
import cash from 'utils/tool';//引入处理分割金额的方法(变量)
import {mapState} from 'vuex'
import {withdrawalsList,} from 'api/preDeposit';
export default {
	components: {
		Noempty
 	} ,
	data () {
		return {
       
			Nomsg: false,
			Money: cash,
			action:0,//点击tab时获取的索引
			tabTitle: ['全部','待审核','已完成',],//设置tab显示的内容，还有一个‘已拒绝’屏蔽不给用户看
			// logType:'',//用于给明细名称赋值
			withdrawalsListParams:{
				curPageNO:'1',
				state:null
			},
			withdrawalsListData:{},//withdrawalsList接口的result
			loading: false,//下拉加载时用
			finished: false,//下拉加载时用
		}
	},
	mounted () {
    let that = this

		this.withdrawalMethods()
	},

	methods: {
		withdrawalMethods(){//封装获取withdrawalsList接口的方法
			this.withdrawalsListParams.curPageNO='1'
			this.Nomsg=false,//如果不加这句，当某一个tab没内容且点击它后，点击另一个没内容的tab时，会不能显示数据
			withdrawalsList(this.withdrawalsListParams).then(res =>{
				this.withdrawalsListData=res.result
				if (res.status==1) {
					if (res.result.resultList) {
						this.withdrawalsListData=res.result
					} else {
						this.Nomsg=true
					}
				} else {
					this.$toast({duration: 1000,message:res.msg})
				}
			}),()=>{this.$toast('获取数据失败')}
		},
		tab(index) {//点击tab栏时的方法
			this.initialize()
			this.withdrawalsListData.resultList = []  //清除对象数据
			this.action = index
			if(this.action==0){//当v-if="action===0"时，显示‘全部’
				this.withdrawalsListParams.state=null
				this.withdrawalMethods()
			}else if(this.action==1){//当v-if="action===0"时，显示‘待审核’
				this.withdrawalsListParams.state=0
				this.withdrawalMethods()
			}else if(this.action==2){//当v-if="action===2"时，显示‘已成功’
				this.withdrawalsListParams.state=1
				this.withdrawalMethods()
			}else if(this.action==3){//当v-if="action===3"时，显示‘已拒绝’
				this.withdrawalsListParams.state=-1
				this.withdrawalMethods()
			}
		},
		transferId(index){
			this.$router.push({
				path:'/preDeposit/withdrawalsDetail',
				query:{id:this.withdrawalsListData.resultList[index].id,}
			});
		},
		onLoad() {//vant-list下拉加载方法
			setTimeout(() => {
				if(this.withdrawalsListData.resultList!=null){
					if (this.withdrawalsListData.resultList.length >= this.withdrawalsListData.total) {
						this.loading = false
						this.finished = true
					} else {
						this.withdrawalsListParams.curPageNO++
						withdrawalsList(this.withdrawalsListParams).then(res=> {
							for (let i = 0; i < res.result.resultList.length; i++) {
								this.withdrawalsListData.resultList.push(res.result.resultList[i])
							}
							// 加载状态结束
							this.loading = false;
						})
					}
				}
				else{
					this.initialize()
				}
			}, 500);
		},
		initialize() {//初始化
			this.withdrawalsListParams.curPageNO = 1
			this.withdrawalsListParams.state = null
			this.withdrawalsListData.resultList = []  //清除对象数据
			this.finished = false  //重置判断更多
			this.loading = false,
			this.withdrawalsListData.total = 0
		},
	},
	computed: {
		...mapState(['themes']),
	},


}
</script>

<style src="../../assets/css/style/my-style.css" scoped></style>
<style src="../../assets/css/pre-deposit.css" scoped></style>
<style scoped>
/* 让Tab栏固定在顶部 */
.m-tabs{
    position: fixed;
    top: 44px;
    width: 100%;
    max-width: 750px;
	background: #fff;
	z-index: 1;
}

/* 这段如果删除的话,空白页面的图标,会错位顶到顶部 */
.Noempty{
	position:fixed;
	top:93px;
	width:100%;
	max-width:750px;
	background:#fff;
	bottom:0;
	padding:1rem 0;
}
</style>
